.cs-spinner-fading-circle-circle:before{
  content: " ";
  display: block;
  margin: 0 auto;
  size: 15%;
  border-radius: 100%;
  animation: cs-fading-circle 1.2s infinite ease-in-out both;
}
@component-namespace cs-spinner {
    @component fading-circle {
      position: relative;

      @descendent circle {
        size: 100%;
        position: absolute;
        top:0;
        left:0; 
      }
    @for $i from 2 through 12 {
        .is-circle#{$i} {
          transform: rotate(360deg / 12 * ($i - 1));
          &:before {
            animation-delay: -1.2s + 1.2s / 12 * ($i - 1);
          }
        }
      }
    }
    @keyframes cs-fading-circle {
      0%, 39%, 100% { opacity: 0 }
      40% { opacity: 1 }
    }
  }